<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="filterForm" :model="filterForm" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="合约" prop="keyword">
          <el-input v-model="filterForm.keyword" clearable placeholder="合约" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="期权" prop="allowedOption">          
          <el-radio-group v-model="filterForm.allowedOption">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">支持</el-radio-button>
            <el-radio-button label="2">不支持</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="夜盘" prop="allowedNight">          
          <el-radio-group v-model="filterForm.allowedNight">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">支持</el-radio-button>
            <el-radio-button label="2">不支持</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      
      <el-radio-group v-model="filterForm.blockID" @change="handleFilter">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button :label="block.ID" v-for="(block,index) in blockOptions" :key="index">{{block.blockName}}</el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="合约" align="center" fixed="left" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.code }}</span>
          </template>
      </el-table-column>
      <el-table-column label="主题" align="center" width="200px">
        <template slot-scope="{row}">
          <span>{{ row.fullname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="板块" align="center" width="200px">
        <template slot-scope="{row}">
          <span>{{ row.block.blockName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="期权" align="center" width="100px">
        <template slot-scope="{row}">
          <span v-if="row.allowedOption == 1">支持</span>
          <span v-else>不支持</span>
        </template>
      </el-table-column>
      <el-table-column label="夜盘" align="center" width="100px">
        <template slot-scope="{row}">
          <span v-if="row.allowedNight == 1">支持</span>
          <span v-else>不支持</span>
        </template>
      </el-table-column>
      <el-table-column label="托管设备" align="center" width="200px">
        <template slot-scope="{row}">
          <div @click="hiddenDepositWrapper=true;subscribeForm.symbolID=row.ID">{{ row.device.deviceName ||'-'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="板块" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.block.blockName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易所" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.exchange }}</span>
        </template>
      </el-table-column>
      <el-table-column label="加入时间" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.createdAt }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />
      
    <el-dialog
      title="托管设备"
      :visible.sync="hiddenDepositWrapper"
      :close-on-click-modal="false"
      width="50%">
      <el-form ref="filterForm" :model="subscribeForm"  label-position="left" label-width="100px">
        <el-form-item label="设备" prop="deviceID">
          <el-select v-model="subscribeForm.deviceID" placeholder="请选择">
              <el-option
                v-for="device in deviceList"
                :key="device.ID"
                :label="device.deviceName"
                :value="device.ID">
              </el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hiddenDepositWrapper = false">取 消</el-button>
        <el-button type="primary" @click="handleSubscribeSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//import { getFaultinessList,  removeFaultinessByID, changeFaultinessStatusByID } from '@/api/development/faultiness'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getHost} from '@/utils/socket' // secondary package based on el-pagination
import {getSymbolList,subscribeSave,subscribeCannel,subscribeDelete} from '@/api/knowledge/symbol'
import {getBlockList} from '@/api/knowledge/block'

export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      list: null,
      windowHeight:"800",
      total: 0,
      listLoading: false,
      deviceList:[],
      subscribeForm:{
        symbolID:0,
        deviceID:0
      },
      hiddenDepositWrapper:false,
      exchangeList:[
        {
          code:"czce",
          label:"郑州商品交易所"
        },
        {
          code:"dce",
          label:"大连商品交易所"
        },
        {
          code:"shfe",
          label:"上海商品交易所"
        },
        {
          code:"cffex",
          label:"中国金融商品交易所"
        }
      ],
      connected:"loading",
      blockOptions:[
        {
          label:"金融",
          value:1000
        },
        {
          label:"农产品",
          value:1001
        },
        {
          label:"油脂油料",
          value:1002
        },
        {
          label:"有色金属",
          value:1003
        },
        {
          label:"贵金属",
          value:1004
        },
        {
          label:"黑色金属",
          value:1005
        }
      ],
      filterForm: {
        page: 1,
        size: 10,
        allowedOption:'0',
        allowedNight:'0',
        blockID:'0'
      }
    }
  },
  created() {
    let symbolData = window.localStorage.getItem('localSymbol')
    symbolData = JSON.parse(symbolData)
    try {
      this.localSymbol = symbolData.code
    } catch (error) {
      
    }
    this.getList()
    this.getSymbolBlockList()
  },
  destroyed () {
  },
  methods: {
    handleSubscribeSubmit:function(){
        let _this = this
        _this.send({
            "conversationType":"foundation.device.save",
            "message":_this.subscribeForm,
            "target":{"id":"3"}
        })
    },
    getList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getSymbolList(_this.filterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.list = response.data.list
            this.total = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getSymbolBlockList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getBlockList().then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.blockOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getDeviceList:function(){
      this.send({
        "conversationType":"foundation.device.list",
        "message":{},
        "target":{"id":"3"}
      })
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    sortChange:function(){

    }
  }
}
</script>
<style>

</style>